<template>
  <div :class="{ 'je-admin-top-menu-app-info': true, 'je-theme-color-weak': grayMode }">
    <i :class="icon"></i> {{ title }}
  </div>
</template>
<script>
  import { defineComponent, ref, computed } from 'vue';
  import { useMenuStore } from '@/stores/menu-store';
  import { useThemeStore } from '@common/store/theme-store';
  import { useRoute } from 'vue-router';
  export default defineComponent({
    name: 'AdminTopMenuAppInfo',
    setup() {
      const route = useRoute();
      const menuStore = useMenuStore();
      const themeStore = useThemeStore();
      const menu = menuStore.getMenuByRoute(route);
      const icon = ref(menu?.icon ?? 'fal fa-question');
      const title = ref(menu?.text ?? '当前应用无效！');
      const grayMode = computed(
        () => themeStore.getThemeInfo(themeStore.headerTheme)?.colour === 'light',
      ); // 浅色模式，使用灰度
      return { icon, title, grayMode };
    },
  });
</script>
<style lang="less">
  .je-admin-top-menu-app-info {
    display: inline-flex;
    align-items: center;
    padding: 0 20px;
    color: @white;
    font-size: 24px;
    font-weight: 700;
    i {
      margin-right: 10px;
    }
  }
</style>
